<template>
  <div id="app">
    <!-- 生命周期 -->
    <!-- <button @click="flag = false">点我销毁</button>
    <Life v-if="flag" /> -->

    <!--  -->
    <!-- <Father/> -->


    <!-- 混入mixin -->
    <!-- <One/>
    <Two/> -->

    <!-- 组件传值 -->
    <!-- 父子 props -->
    <!-- 子父 this.$emit -->
    <!-- 跨组件  bus -->
    <!-- 父拿子 this.$refs -->
    <!-- 子拿父 this.$parent -->
    <!-- <Father/> -->
    <!-- 孙子拿爷爷 -->
    <!-- <GrandFather/> -->


    <!-- 车系 -->
    <!-- <Car/> -->

    <!-- 插槽  向子组件传递内容(html) -->
    <!-- 1. 默认插槽 -->
    <!-- props -->
    <!-- <Tab msg="">
       !!!!!
       aaaaa
       bbbb
    </Tab> -->

    <!-- 2. 具名插槽 -->
    <!-- <Tab>
      <span slot="aaa">aaaa</span>
      <span slot="bbb">bbbb</span>
    </Tab> -->

    <!-- 3. 作用域插槽 -->
    <!-- ? -->


    <!-- 应用 -->
    <!-- 登录 -->
    <!-- <LayOut 
      :isShowHeader="false"
      :isShowFooter="false">
      <div slot="mainTop">
        <Login/>
      </div>

      <div slot="login">
        <h3>第三方登录</h3>
      </div>
    </LayOut> -->

    <!-- 注册 -->
    <!-- <LayOut 
      :isShowHeader="false"
      :isShowFooter="false">
      <div slot="mainTop">
        <Register/>
      </div>
    </LayOut> -->

    <!-- 首页 -->
    <!-- <LayOut :isShowBack="false" title="首页">
      <div slot="mainTop">
        <Home/>
      </div>
    </LayOut> -->

    <!-- 列表 -->
    <!-- <LayOut :goBackNum="3" title="列表"></LayOut> -->


    <!-- 自定义指令 -->
    <!-- <Dic/> -->

    <!-- 第三库  图片懒加载 -->
    <Dic2/>
  </div>
</template>

<script>
// import Life from './components/Life.vue'
// import Father from './components/Father.vue'

// import One from './components2/One.vue'
// import Two from './components2/Two.vue'

// import Father from './components3/Father.vue'
import GrandFather from './components4/GrandFather.vue'

// 下午
import Car from './components5/Car.vue'

// 插槽
import Tab from './components6/Tab.vue'

// LayOut
import LayOut from './components7/LauOut.vue'

import Login from './components7/Login.vue'
import Register from './components7/Register.vue'
import Home from './components7/Home.vue'

// 自定义指令
import Dic from './components8/Dic.vue'

// 自定义指令
import Dic2 from './components8/Dic2.vue'

export default {
  name: 'App',
  data() {
    return {
      flag: true
    }
  },
  components: {
    // Life,
    // Father,
    // One,
    // Two,
    // Father,
    // GrandFather,
    // Car,
    // Tab,
    // LayOut,
    // Login,
    // Register,
    // Home,
    // Dic，
    Dic2
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html, body, #app {
  height: 100%;
}

.h100 {
  height: 100%;
}
</style>
